<template>
	<view class="pb170">
		<view class="header-bar"  style="background-color: #FF7F50;"></view>
		<!-- 轮播图 -->
		<view class="u-relative">
			<u-swiper :list="goodsD.imgs_path" height='750' border-radius='0' @click='btnPic'></u-swiper>
			<view class="backIcon" @click.stop="gotoback">
				<u-icon name="arrow-left" size="40" ></u-icon>
			</view>
		</view>
		<view class="bg-f pl30 pr30 pt30 pb30">
			<view class="color-y7 fs38">
				<text class="fs24 mr6 fw-700">¥</text>
				<text class="fw-700">{{goodsD.price}}</text>
			</view>
			<view class="fs28 fw-600 mt20">{{goodsD.name}}</view>
		</view>
		<view class="flex row-center col-center mb10">
			<view class="mr10" style="width: 40px;height: 2px;background: #D8D8D8;"></view>
			<view class="">商品详情</view>
			<view class="ml10" style="width: 40px;height: 2px;background: #D8D8D8;"></view>
		</view>
		<!-- 富文本 -->
		<rich-text :nodes="goodsD.detail"></rich-text>
		<!-- 底部按钮 -->
		<view class="fw-500 footerBtn pl30 pr30 bg-f pt20 pb70">
			<u-button type="primary" shape="circle" @tap="show=true">立即购买</u-button>
		</view>

		<!-- //购买弹层 -->
		<view>
			<u-popup v-model="show" mode='bottom' height='480' border-radius='16'>
				<view class="pl30 pt30">
					<view class="closebtn">
						<u-icon name="close" @click="show=false" color="#999999"></u-icon>
					</view>
					<view class="flex pr70">
						<view class="mr30 w160 h160" style="box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);">
							<image
								:src="goodsD.img_path"
								class="w160 h160 radius8"></image>
						</view>
						<view class="flex flex1 row-column row-between">
							<view class="fs32 fw-500">{{goodsD.name}}</view>
							<view class="fs36" style="color: #F23232;">
								<text>¥</text>
								<text>{{goodsD.price}}</text>
							</view>
						</view>
					</view>
					<view class="mt30 flex row-between col-center mr30">
						<text class="fs26 fw-500">数量</text>
						<u-number-box v-model="value" @change="valChange" size='22' :min='1'></u-number-box>
					</view>
					<view class="fw-500 footerBtn pl30 pr30 bg-f pt20 pb70">
						<u-button type="primary" shape="circle" @tap="$jump(`/pages/home/submitOrder?id=${id}&num=${value}`),show=false">立即购买</u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		name:'goodsD',
		onLoad(opt) {
			this.id=opt.id
			this.getGoodsDetail()
		},
		data() {
			return {
				//商品id
				id:'',
				show: false,
				value: 1,
				//商品详情
				goodsD:{},
				list: [],
			};
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			//获取商品详情
			getGoodsDetail() {
				this.$api.getGoodsDetail({id:this.id}).then(res=>{
					// console.log(res)
					// console.log(111,res.data.detail)
					res.data.detail = res.data.detail.replace(/<img /g,
						'<img style="display:block;width:100%;"')
					this.goodsD=res.data
				})
			},
			//点击轮播图
			btnPic(e) {
				// 预览图片
				uni.previewImage({
					current: e,
					urls: this.goodsD.imgs_path
				});
			},
			//返回
			gotoback() {
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="scss">
	.backIcon {
		position: absolute;
		top: 30rpx;
		left: 10rpx;
	}

	.closebtn {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
</style>
